<template>
  <div class="bg-white rounded-lg p-6 shadow-md hover:shadow-md transition-shadow">
    <h3 class="text-lg  mb-4 font-bold  text-gray-800">{{ title }}</h3>
    <div class="space-y-4">
      <button
        v-for="event in currentEvents"
        :key="event.id"
        class="flex items-start p-3  hover:shadow-md transition-shadow w-full text-left rounded-lg"
        :class="event.bgColor"
        @click="handleEventClick(event)"
      >
        <div class="text-center mr-4">
          <div class="text-xl font-bold">
            {{ event.date }}
          </div>
          <div class="text-sm text-gray-500">{{ event.month }}</div>
        </div>
        <div>
          <h4 class="font-medium">{{ event.title }}</h4>
          <p class="text-sm text-gray-600 mt-1">
            {{ event.location }} · {{ event.time }}
          </p>
        </div>
      </button>
      <div class="flex justify-center items-center space-x-2 mt-4">
        <button
          @click="prevPage"
          :disabled="currentPage === 1"
          class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <i class="fas fa-chevron-left text-gray-600"></i>
        </button>
        <span class="text-sm text-gray-600">{{ currentPage }}/{{ totalPages }}</span>
        <button
          @click="nextPage"
          :disabled="currentPage === totalPages"
          class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <i class="fas fa-chevron-right text-gray-600"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { calendarEvents } from "@/mock/activityData";

export default {
  name: "EventCalendar",
  props: {
    // 组件标题
    title: {
      type: String,
      default: "活动日历"
    },
    // 每页显示的事件数量
    eventsPerPage: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      currentPage: 1,
      events: calendarEvents
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.events.length / this.eventsPerPage);
    },
    currentEvents() {
      const start = (this.currentPage - 1) * this.eventsPerPage;
      const end = start + this.eventsPerPage;
      return this.events.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    handleEventClick(event) {
      // 这里可以添加点击事件的处理逻辑
    }
  }
};
</script>

<style scoped>
/* 组件特定样式 */
</style>